<template>
  <div class="international-card" ref="international">
    <el-card shadow="never">
      <div slot="header" class="title">
        <span>境内境外企业占比</span>
      </div>
      <echarts
          id="international-card"
          v-if="echartHeight"
          :options="options"
          :width="echartWidth"
          :height="echartHeight"
      />
    </el-card>
  </div>
</template>

<script>
import Echarts from '../echarts/index.vue'

export default {
  name: 'InternationalCard',
  components: { Echarts },
  data () {
    return {
      echartWidth: null,
      echartHeight: null,
      options: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              // show: true,
            },

            labelLine: {
              show: false
            },
            data: [
              { name: '境内企业', value: 1048, itemStyle: { color: '#1890FF' } },
              { name: '境外企业', value: 735, itemStyle: { color: '#FFA23C' } },
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.echartWidth = this.$refs.international.clientWidth - 20 * 2
      const headerHeight = document.getElementsByClassName('el-card__header')[0].offsetHeight
      this.echartHeight = this.$refs.international.clientHeight - headerHeight - 20 * 2
    })
  }
}
</script>

<style lang="scss" scoped>
.international-card {
  .el-card {
    /deep/ .el-card__header {
      padding: 15px 20px !important;
    }

    // /deep/ .el-card__body {
    //     padding: 20px 40px !important;
    // }
  }

  .title {
    line-height: 24px;

    span {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>